<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:s="http://jboss.com/products/seam/taglib" xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j">
    <f:view contentType="text/html">
        <head>
            <meta charset="UTF-8"/>


            <title>Mediaplayer</title>
            <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
            <script type="text/javascript" src="http://www.google.com/jsapi"></script>
            <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
            <script src="/resources/jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript"
                    charset="utf-8"></script>
            <style type="text/css" media="screen">@import "/resources/jqtouch/jqtouch/jqtouch.min.css";</style>
            <style type="text/css" media="screen">@import "/resources/jqtouch/themes/apple/theme.min.css";</style>
            <script type="text/javascript" charset="utf-8">

                var jQT = new $.jQTouch({
                    icon: 'jqtouch.png',
                    addGlossToIcon: true,
                    startupScreen: 'jqt_startup.png',
                    statusBar: 'white',
                    preloadImages: [
                        '../../themes/apple/img/back_button.png',
                        '../../themes/apple/img/back_button_clicked.png',
                        '../../themes/apple/img/button_clicked.png',
                        '../../themes/apple/img/grayButton.png',
                        '../../themes/apple/img/whiteButton.png',
                        '../../themes/apple/img/loading.gif'
                    ]
                });

            </script>
        </head>
        <body>

        <div>
            <div class="toolbar">
                <h1 id="pageTitle">MediaPlayer</h1>
            </div>
            <ul class="rounded">
                <ui:repeat value="#{musiclist.artists}" var="artist">
                    <li class="arrow"><a href="##{artist.webName}">#{artist.name}</a></li>
                </ui:repeat>
            </ul>
        </div>

        <ui:repeat var="artist" value="#{musiclist.artists}">
            <div id="#{artist.webName}">
                <div class="toolbar">
                    <h1>Artist</h1>
                    <a class="back" href="#">Home</a>
                </div>
                <ul class="rounded">
                    <ui:repeat var="album" value="#{musiclist.getAlbumByArtist(artist.name)}">
                        <li class="arrow">
                            <a4j:form>
                                <a4j:commandLink
                                        action="#{musiclist.mediaPlayer.addToPlayList(album.name, album.artist)}">+</a4j:commandLink>
                            </a4j:form>
                            <a href="##{album.webFriendlyArtistName}#{album.webFriendlyAlbumName}">#{album.name}</a>
                        </li>
                    </ui:repeat>
                </ul>
            </div>
        </ui:repeat>

        <ui:repeat var="artist" value="#{musiclist.artists}">
            <ui:repeat var="album" value="#{musiclist.getAlbumByArtist(artist.name)}">
                <div id="#{album.webFriendlyArtistName}#{album.webFriendlyAlbumName}">
                    <div class="toolbar">
                        <h1>#{album.webFriendlyArtistName} : #{album.name}</h1>
                        <a href="#" class="back">Back</a>
                    </div>
                    <ul class="rounded">
                        <a4j:form>
                            <ui:repeat var="track" value="#{musiclist.getSongsByAlbum(album.name, album.artist)}">
                                <li class="arrow"><a4j:commandLink
                                        action="#{mediaplayer.playSong(track.path)}">#{track.title}</a4j:commandLink>
                                    <!--<a href="#{mediaplayer.playSong(track.path)}">#{track.title}</a>-->
                                </li>
                            </ui:repeat>
                        </a4j:form>
                    </ul>
                </div>
            </ui:repeat>
        </ui:repeat>

        </body>
    </f:view>
</ui:composition>